<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:set var="createSuccessfulMsg"
  value="%{getText('info.create.successful', {getText('title.product.item.price')})}" />
<s:set var="requiredMsg" value="%{getText('error.required')}" />
<script type="text/javascript">
  function resetForm() {
    $('#price-add-dialog-form :input:not(:hidden)').val('');
    $("#uoms option:selected").removeAttr("selected");
    focusOnFirstElement();
  }

  function loadUnitOfMeasurement() {
    jQuery.ajax({
      url : '${pageContext.request.contextPath}/uom/getUoms.action',
      dataType : 'json',
      async : false,
      cache : false,
      success : function(data) {
        var uoms = $('#uoms');
        uoms.empty();
        uoms.append($('<option />'));
        $.each(data.rows,function(idx,record) {
          uoms.append($('<option />').val(record.key).text(record.value));
        });
      }
    });
  }

  function focusOnFirstElement() {
    setTimeout(function() {
      $('#price-add-dialog-form :input:visible:enabled:first').focus();
    },10);
  }

  $(function() {
    $(':input:not(:hidden)').prop('autocomplete','off');
    $('#priceAddMsg').tooltip({
      tooltipClass : "ui-state-highlight"
    });
    $('#price-add-dialog-form').dialog({
      height : 400,
      width : 600,
      modal : true,
      close : function() {
        $(this).remove();
      }
    });
    $('#addPriceButtonDiv').addClass('ui-dialog-buttonset');
    $('.submit-button').button();
    $('#priceAddCancelBtn').click(function(e) {
      e.preventDefault();
      $('#price-add-dialog-form').remove();
    });
    $('#priceAddOkBtn').click(function(e) {
      e.preventDefault();
      var bValid = $('#price-add-form').valid();
      if (bValid) {
        var params = {};
        params['itemPrice.attributeId'] = $('#attributeId').val();
        params['itemPrice.price'] = $('#itemPrice').val();
        $('#uoms option:selected').each(function(idx) {
          params['itemPrice.uom'] = $(this).val();
        });
        jQuery.ajax({
          url : '${pageContext.request.contextPath}/inventory/price/createProductItemPrice.action',
          type : 'POST',
          dataType : 'json',
          cache : false,
          data : params,
          success : function(data) {
            var msg = '';
            var status = data.status;
            if (status == 'SUCCESS') {
              msg = '<s:property value="#createSuccessfulMsg"/>';
              $('#listProductItemPrice').trigger('reloadGrid');
              resetForm();
            } else if (status == 'ERROR') {
              if (data.errors) {
                var errors = data.errors;
                for ( var i = 0; i < errors.length; i++) {
                  msg += errors[i];
                  if (i < errors.length - 1) {
                    msg += ', ';
                  }
                }
              }
            }
            $('#priceAddMsg').attr('title',msg).tooltip('open');
            setTimeout(function() {
              $('#priceAddMsg').tooltip("close").attr("title","");
            },1500);
          }
        });
      }
    });
    $("#priceAddAccordion").multipleaccordion();
    $('#priceAddAccordion > div > table td.LABEL').css({
      'width' : '130px'
    });
    $('input, select, textarea, button').not(':hidden').each(function(idx) {
      $(this).prop('tabindex',idx + 1);
    });
    $('#price-add-dialog-form').wrap('<form id="price-add-form">');
    $.validator.setDefaults({
      errorClass : 'ui-state-error',
      errorPlacement : function(error,element) {
        if (element.context.id.indexOf('_combobox') == -1) {
          error.insertAfter(element.parent().children(':last'));
        } else {
          error.appendTo(element.parent());
        }
      }
    });
    $('#price-add-form').validate(
        {
          rules : {
            'uoms' : {
              required : true
            },
            'itemPrice' : {
              required : true,
              number : true,
              min : 0
            }
          },
          messages : {
            'uoms' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.uom\")}" />')
            },
            'itemPrice' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.item.price\")}" />'),
              number : jQuery.format('<s:property value="getText(\'error.numeric.required\')" />',
                  '<s:property value="%{getText(\"field.item.price\")}" />'),
              min : jQuery.format('<s:property value="getText(\'error.min\')" />',
                  '<s:property value="%{getText(\"field.item.price\")}" />',0)
            }
          }
        });
    loadUnitOfMeasurement();
    focusOnFirstElement();
  });
</script>
<div id="price-add-dialog-form"
  title='<s:property value="getText('title.add.product.item.price')"/>'>
  <div id="priceAddMsg"></div>
  <div id="priceAddAccordion">
    <h3>
      <s:property value="getText('title.product.item.price')" />
    </h3>
    <div>
      <table>
        <tr>
          <td class="LABEL"><label for="uoms" class="mandatory"><input type="hidden"
              id="attributeId" name="itemPrice.attributeId"
              value='<s:property value="%{#parameters[\"itemPrice.attributeId\"]}" />' /> <s:property
                value="getText('field.uom')" /></label></td>
          <td><select id="uoms" name="uoms"></select></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="itemPrice" class="mandatory"><s:property
                value="getText('field.item.price')" /></label></td>
          <td><input type="text" id="itemPrice" name="itemPrice" maxlength="100"></td>
        </tr>
      </table>
    </div>
  </div>
  <div id="addPriceButtonDiv">
    <button id="priceAddOkBtn" class="submit-button">
      <s:property value="getText('button.ok')" />
    </button>
    <button id="priceAddCancelBtn" class="submit-button">
      <s:property value="getText('button.cancel')" />
    </button>
  </div>
</div>